<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-model-item label="企业搜索">
                            <j-input v-model="queryParam.companyName" placeholder="请输入企业名称" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="站点">
                            <j-dict-select-tag v-model="queryParam.siteId" dict-code="HC_SITE,NAME,ID"
                                placeholder="请选择站点" @change="" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="创建人">
                            <j-input v-model="queryParam.createBy" placeholder="请输入姓名" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                            <a-button type="primary" @click="showFormAlert('add')" icon="plus"
                                style="margin-left: 8px">新增</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <div>
            <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                @change="handleTableChange">
                <template slot="companyNameSlot" slot-scope="text,record">
                    <div @click="changeMode(record)">{{ text }}</div>
                    <div><a :href="`${baseUrl}/pages/order?id=${record.id}`" target="_blank">{{
                        `${baseUrl}/pages/order?id=${record.id}` }}</a></div>
                    <div><a :href="`${baseUrl}/pages/company/orderSummary?id=${record.id}`" target="_blank">{{
                        `${baseUrl}/pages/company/orderSummary?id=${record.id}` }}</a></div>
                </template>
                <template slot="isDisplayMerchantSlot" slot-scope="text,record">
                    <a-switch :checked="text == 1" @change="changeDisplayMerchantState(record)" checked-children="是"
                        un-checked-children="否" size="small" />
                </template>
                <template slot="stateSlot" slot-scope="text,record,index">
                    <a-switch :checked="text == 'yes'" @change="changeState(record)" checked-children="是"
                        un-checked-children="否" size="small" />
                </template>
                <template slot="codeSlot" slot-scope="text,record,">
                    <a @click="showCodeAlert(record.id)">点击复制</a>
                </template>
                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text,record">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
                        style="max-width:80px;font-size: 12px;font-style: italic;" />
                </template>
                <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button v-else :ghost="true" type="primary" icon="download" size="small"
                        @click="downloadFile(text)">
                        下载
                    </a-button>
                </template>

                <span slot="action" slot-scope="text, record">
                    <a @click="showFormAlert('edit', record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="showSetAlert(record)">设置</a>
                    <a-divider type="vertical" />
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                    </a-popconfirm>
                    <a-divider type="vertical" />
                    <a @click="changeMode(record)">商家列表</a>
                    <a-divider type="vertical" v-if="record.realNameLogin!='0'" />
                    <a @click="showMemberModal(record.id)" v-if="record.realNameLogin!='0'">员工列表</a>
                </span>
            </a-table>
        </div>
        <code-alert ref="codeAlert"></code-alert>
        <company-create ref="companyCreate" @loadData="loadData"></company-create>
        <company-set ref="set" @loadData="loadData"></company-set>
        <memberModal ref="memberModal"></memberModal>
    </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import codeAlert from './codeAlert.vue'
import companyCreate from './create.vue'
import companySet from './set.vue'
import { getAction, postAction } from '@api/manage'
import memberModal from './memberModal.vue'

export default {
    name: 'HcRiderList',
    mixins: [JeecgListMixin, mixinDevice],
    components: { codeAlert, companyCreate, companySet, memberModal },
    data() {
        return {
            description: '企业',
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '企业名称',
                    align: "center",
                    dataIndex: 'companyName',
                    scopedSlots: { customRender: 'companyNameSlot' },
                },
                {
                    title: '启用/隐藏',
                    align: "center",
                    dataIndex: 'isDisplayMerchant',
                    scopedSlots: { customRender: 'isDisplayMerchantSlot' },
                },
                {
                    title: '企业简称',
                    align: "center",
                    dataIndex: 'companyShortName'
                },
                {
                    title: '企业地址',
                    align: "center",
                    dataIndex: 'companyAddress'
                },
                {
                    title: '状态',
                    align: "center",
                    dataIndex: 'state',
                    scopedSlots: { customRender: 'stateSlot' },
                },
                {
                    title: '二维码',
                    align: "center",
                    dataIndex: 'code',
                    scopedSlots: { customRender: 'codeSlot' },
                },
                {
                    title: '所属站点',
                    align: "center",
                    dataIndex: 'siteName'
                },
                {
                    title: '是否需要实名',
                    align: "center",
                    dataIndex: 'realNameLogin',
                    customRender: function (t, r, index) {
                        return t ? '是' : '否'
                    }
                },
                {
                    title: '创建人',
                    align: "center",
                    dataIndex: 'createBy'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "hc/hcCompanyInfo/list",
                delete: "hc/hcCompanyInfo/delete",
                // deleteBatch: "/hc/hcRider/deleteBatch",
                // exportXlsUrl: "/hc/hcRider/exportXls",
                // importExcelUrl: "hc/hcRider/importExcel",
            },
            dictOptions: {},
            superFieldList: [],
            baseUrl: '',
        }
    },
    created() {
        this.getSuperFieldList();
        if (location.host == 'admin.yongshantuan.cn') {
            this.baseUrl = 'https://www.yongshantuan.cn/#'
        } else {
            this.baseUrl = 'http://120.24.54.28:8092/#';
        }
    },
    mounted() {
        // setTimeout(() => {
        //     this.dataSource = [{
        //         id: Math.random(),
        //         companyName: '互橙信息科技有限公司',
        //         enterpriseAbbreviation: 'HC',
        //         state: '是',
        //         code: '',
        //         affiliatedSite: '南山',
        //         createBy: '晋东'
        //     }]
        // }, 500)
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        async changeState(record) {
            record.state = record.state == 'yes' ? 'no' : 'yes';
            let res = await postAction('hc/hcCompanyInfo/edit', record);
            console.log('res', res);
        },
        //二维码弹窗
        showCodeAlert(id) {
            this.$refs.codeAlert.show(id);
        },
        //新增或编辑弹窗
        showFormAlert(type, record) {
            this.$refs.companyCreate.show(type, record);
        },
        //设置弹窗
        showSetAlert(record) {
            this.$refs.set.show(record);
        },
        changeMode(record) {
            this.$emit('changeMode', 2, record)
        },
        initDictConfig() {
        },
        getSuperFieldList() {
            let fieldList = [];
            fieldList.push({ type: 'string', value: 'fullName', text: '姓名' })
            fieldList.push({ type: 'string', value: 'phone', text: '手机号' })
            fieldList.push({ type: 'number', value: 'baseSalary', text: '底薪' })
            this.superFieldList = fieldList
        },
        //启用与隐藏
        async changeDisplayMerchantState(record) {
            record.isDisplayMerchant = record.isDisplayMerchant == 1 ? 0 : 1;
            let res = await postAction('hc/hcCompanyInfo/edit', record);
            console.log('res', res);
        },
        showMemberModal(companyId) {
            this.$refs.memberModal.setData(companyId);
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>